<template>
  <div class="role">
    <pageTable :data="data" :defaultTable="false" class="role-table" @sizeChange="sizeChange">
      <searchForm slot="top-content" @search="toSearch">
        <a-input slot="nameZh" lable="角色名" v-model="search.condition.nameZh" />
        <a-input slot="perkey" lable="角色key" v-model="search.condition.perkey" />
      </searchForm>
      <a-button slot="top-content" type="primary" icon="plus-circle" @click="add(null)">新增</a-button>
      <a-table slot="table-conten" :dataSource="data.records" :columns="cols" bordered :pagination="false">
        <template slot="operation" slot-scope="text, record">
          <a-tooltip placement="top">
            <template slot="title">
              <span>编辑</span>
            </template>
            <a-icon type="form" @click="add(record)" class="opera" />
          </a-tooltip>
          <a-tooltip placement="top">
            <template slot="title">
              <span>删除</span>
            </template>
            <a-icon type="delete" @click="deletes(record)" class="opera" />
          </a-tooltip>
        </template>
      </a-table>
    </pageTable>
    <roleEdit ref="roleEdit" />
    <!-- <menuEdit ref="menuEdit"/> -->
  </div>
</template>

<script>
import pageTable from "@/syscomponents/pageTable.vue";
import searchForm from "@/syscomponents/searchForm";
import roleEdit from "./edit";
// import menuEdit from "./setMnue"
import { page, deleteById } from "./api";
const cols = [
  {
    title: "名称",
    dataIndex: "nameZh"
  },
  {
    title: "key值",
    dataIndex: "perkey"
  },
  {
    title: "是否可接受编辑",
    dataIndex: "isEdit"
  },
  {
    title: "备注",
    dataIndex: "note"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  components: { pageTable, searchForm, roleEdit },
  data() {
    return {
      cols,
      data: {records:[]},
      search: {
        perPageCount: 10,
        currentPage: 1,
        orders: [{ column: "createTime" }],
        condition: {}
      }
    };
  },
  mounted() {
    this.page();
  },
  methods: {
    toSearch() {
      this.page();
    },
    sizeChange(current,size){
      this.search.perPageCount=size
      this.search.currentPage = current
      this.page()
    },
    page() {
      page(this.search).then(v => {
        if (v.ok) {
          this.data = v.data;
        } else {
          this.$message.error(v.msg || "操作失败");
        }
      });
    },
    add(record) {
      this.$refs.roleEdit.showModal(record, record == null);
    },
    deletes(record) {
      this.$confirm("确认删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteById(record.id).then(v => {
          if (v.ok) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else {
            this.$message({
              type: "error",
              message: v.msg || "删除失败!"
            });
          }
        });
      }).finally(()=>{
        this.page()
      });
    }
  }
};
</script>

<style>
.role-table .opera {
  margin-right: 15px;
}
</style>